<template>
    <div class="dir-top-nowrap index-subarea-recommend">
        <div class="dir-top-nowrap gap " v-for="item in    list   " :key="item.title">
            <div class="dir-left-nowrap cross-center gap">
                <NuxtLink class="dir-left-nowrap cross-center subarea-title" :to="`/article/${item.type}`"
                    style="gap: 8px;">
                    <span>{{ item.title }}</span>
                    <img src="/imgs/index/triangle.png">
                </NuxtLink>
            </div>
            <div class="dir-left-nowrap gap list">
                <ArticleItem :item="article" v-for="article in item.recommend_list" :key="article.id"></ArticleItem>
            </div>
            <div class="main-center">
                <NuxtLink class="button" :to="{ name: 'article', query: { type: item.type } }"></NuxtLink>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="IndexSubareaRecommend">
import { NuxtLink, ArticleItem } from "#components";
import { getIndexArticleDisplayList } from "@/api";
import { Code } from "~~/global";
/**
 * 首页分区推荐组件
 */

/**列表 */
const list = ref<any>([])
async function getList() {
    const res = await getIndexArticleDisplayList()
    if (res.code != Code.success) {
        return console.log(res.msg)
    }
    list.value = res.data
}
await getList()

</script>

<style lang='scss' scoped>
.index-subarea-recommend {
    gap: 30px;

    .subarea-title {
        font-size: 24px;
        font-weight: 600;
        color: #333333;
        line-height: 24px;
    }

    .list {}

    .button {
        cursor: pointer;
        width: 180px;
        height: 40px;
        background: url("/imgs/index/more.png") no-repeat center/cover;
    }
}
</style>